<template>
    <div>
        <!-- 表格表头 -->
        <div class="table-header">
            <div>
                <el-button-group>
                    <el-button icon="el-icon-circle-plus-outline" size="small"
                        @click="selectDataDailog(dataForm.pkResponsibility)">关联菜单</el-button>
                    <el-button icon="el-icon-remove-outline" size="small" @click="deleteHandle()">删除菜单
                    </el-button>
                </el-button-group>
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" @click="getDataList()"></el-button>
            </div>
        </div>

        <el-table :data="tableDataList" size="small" min-height="300" style="width: 100%"  highlight-current-row
             row-key="pkRespModule"
            :tree-props="{children: 'children'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column property="pkRespModule" label="职责分配编号"></el-table-column>
            <el-table-column property="label" label="模块/菜单"></el-table-column>
            <el-table-column property="id" label="模块/菜单编号"></el-table-column>
            <el-table-column property="pid" label="上级模块/菜单编号"></el-table-column>

            <div slot="empty">
                <div class="avue-empty">
                    <div class="avue-empty__image" style="height: 50px;"><img
                            src=""
                            alt=""></div>
                    <p class="avue-empty__desc">暂无数据</p>
                </div>
            </div>
        </el-table>

        
        <!--选择菜单弹出框  -->
        <module-dailog v-if="moduledailogVisible" ref="moduledailog" @refreshDataList="getDataList"></module-dailog>
    </div>
</template>
<script>
    import ModuleDailog from './dailog/module-dialog'
    import * as respModuleService from '@/api/upms/respmodule'
    import * as responsibilityService from '@/api/upms/responsibility'
    export default {
        data(){
            return{
                tableDataList: [],
                multipleSelection: [],
                moduledailogVisible: false,
                dataForm:{
                    pkResponsibility: ''
                }
            }
        },
        components: {
            ModuleDailog
        },
        methods: {
            init(pkResponsibility) {
                if (pkResponsibility) {
                    this.dataForm.pkResponsibility = pkResponsibility;
                    this.getDataList()
                }
            },
            // 查询职责关联的菜单树列表数据
            getDataList() {
                respModuleService.getRespModuleTree(this.dataForm.pkResponsibility).then(data => {
                    this.tableDataList = data
                })
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            
            // 选择菜单数据
            selectDataDailog(id) {
                this.moduledailogVisible = true
                this.$nextTick(() => {
                    this.$refs.moduledailog.init(id)
                })
            },
            getTreeProp(arr, field) {
                //  arr 是返回的数据  parendId 父id
                let temp = [];

                let treeArr = arr;

                treeArr.forEach((item, index) => {
                    if (item[field] != null) {

                        var val = item[field]
                        temp.push(val)

                        if (item.children != null && this.getTreeProp(item.children, field).length > 0) {
                            val = this.getTreeProp(item.children, field)

                            val.forEach(item => {
                                temp.push(item)
                            })
                        }

                    }


                })

                return temp;
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.getTreeProp(this.multipleSelection, 'pkRespModule')

                var names = this.getTreeProp(this.multipleSelection, 'title')
                this.$confirm(`确定对[${names.join(',')}]进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    respModuleService.delBatchrespmodule(ids).then(data => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    })
                }).catch(() => {})
            }
        }
    }
</script>